Flutter Hybrid composition

Hybrid composition 模式将原生的 android.view.View 添加到视图层级中。因此，键盘处理和辅助功能能够即刻正常工作。在 Android 10 之前，这种模式可能会显著降低 Flutter UI 的帧传输率（FPS）。

将原生视图附加到视图层次结构中。如果出现 Flutter Widget 需要渲染在原生视图之上，使用 FlutterImageView 来承载新图层。

PlatformView 通过 FlutterMutatorView 将原生视图 addView 到 FlutterView 上。然后再通过 FlutterImageView 能力实现图层的混合。

Flutter 1.2 版本中引入。

优点：

• 原生视图直接渲染显示
• 键盘处理、无障碍开箱即用

存在不足

例如，在列表中用 Hybrid Composition 嵌入一个原生视图，会造成卡顿或者闪烁。

• 原生控件直接渲染，在原生平台线程上执行，Flutter UI 线程与平台线程存在线程同步问题。导致画面闪烁 bug。

线程同步问题

闪烁问题

Android 10 以前内存占用

Android 10 以前的版本（不包含 Android 10），每个 Flutter 帧从显存复制到主内存，再将其复制回 GPU 纹理。

两次内存拷贝（GPU->CPU->GPU），导致性能影响会大大降低 Flutter UI FPS 性能。

FlutterImageView

FlutterImageView 的作用是：如果原生视图之上，需要显示 Flutter 视图，通过 FlutterImageView 来承载这一图层的绘制。

转化过程

假设界面中一开始没有原生视图，后续需要展示原生视图，Flutter 视图容器，会存在一个转化过程。

网络资源

• 在 Flutter 应用中使用集成平台视图托管您的原生 Android 视图 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

• PlatformViewLink class - widgets library - Dart API

• AndroidViewSurface class - widgets library - Dart API

• PlatformViewsService class - services library - Dart API

• Flutter Hybrid Composition混合图层的原理分析 - 简书

  • 在 Flutter 1.20， 官方推出了Hybrid Composition，此方法仿照ios端的platform view 在flutter中的显示方式，相较于原来的AndroidView性能要更好。

本文作者：Maeiee

本文链接：Flutter Hybrid composition

版权声明：如无特别声明，本文即为原创文章，版权归 Maeiee 所有，未经允许不得转载！

喜欢我文章的朋友请随缘打赏，鼓励我创作更多更好的作品！